<!DOCTYPE html>

<html>
<meta charset="utf-8"/>
<title>iPhone手机解锁效果</title>
<style type="text/css">
#iphone{position:relative;width:426px;height:640px;margin:10px auto;background:url(iphone.jpg) no-repeat;}
#lock{position:absolute;left:50%;bottom:33px;width:358px;height:62px;margin-left:-179px;}
#lock span{position:absolute;width:93px;height:62px;cursor:pointer;background:url(unlock_btn.jpg) no-repeat;}
</style>
<script src="drag.js" type="text/javascript" charset="utf-8"></script>
<script src="animate.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById("lock").children[0];
		var main = document.getElementById("iphone").children[0];
// 		
// 		btn.onmousedown = function(e){
// 			var mousexy = {
// 				x : e.offsetX,
// 				y : e.offsetY
// 			}
// 			document.onmousemove = function(e){
// 				btn.style.left = e.clientX-mousexy.x + "px";	
// 			}
// 		}
// 		
// 		document.onmouseup = function(){
// 			document.onmousemove = null;
// 		}
		draggable(btn, {
			x : true,
			y : false,
			limit : true
		});
		
		document.addEventListener("mouseup", function(){
			if(btn.offsetLeft >= 179) {
				animate(btn, {left: btn.parentNode.offsetWidth-btn.offsetWidth}, function(){
					hide(btn);
					animate(main, {opacity: 100});
				})
			} else {
				animate(btn, {left: 0})
			}
		})
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</script>
</head>
<body>
<div id="iphone">
	<img src="iphone2.jpg" style="opacity: 0;">
	<div id="lock"><span></span></div>
</div>


</body></html>